<template>
    <div id="bodag">
      <el-button type="success" @click="dialogFormVisibleAdd = true" round style="margin-bottom:25px;">添加数据</el-button>
      <!--添加数据弹出框-->
       <el-dialog title="添加信息" :visible.sync="dialogFormVisibleAdd">
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="实物货品" name="first">
                <template>
                    <el-form :model="addData">
                        <el-form-item label="货品 :">
                            <el-input class="inputSty" v-model="addData.propName"></el-input>
                        </el-form-item>
                        <el-form-item label="图片 :">
                               <div class="upload">
                                 <img class="imgUpload" :src="this.addData.img" alt="">
                                 <el-button style="" type="primary" @click="goUpload" size="small">上传图片</el-button>
                                 <input type="file" @change="fileChange" ref="file" class="file" accept='image/*'>
                               </div>
                        </el-form-item>
                        <el-form-item label="货品数量 :">
                            <el-input class="inputSty" placeholder='请输入合理的数字' v-model="addData.number"></el-input>
                        </el-form-item>
                        <el-form-item label="货品库存 :">
                            <el-input class="inputSty" placeholder='请输入合理的数字' v-model="addData.notNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="货品原价 :">
                            <el-input class="inputSty" placeholder='请输入合理的数字'  @change="changeGoodsPrice" v-model="changeThree.goodsOriginal"></el-input>
                        </el-form-item>
                        <el-form-item label="货品现价 :">
                            <el-input class="inputSty" placeholder='请输入合理的数字' @change="changeGoodsNow" v-model="changeThree.goodsNow"></el-input>
                        </el-form-item>
                        <el-form-item label="折扣率 :">
                            <el-input class="inputSty" style="width:100px;" @change="changeDepositRate" v-model="changeThree.depositRate"></el-input>
                            <label for="">折</label>
                        </el-form-item>
                        <el-form-item label="开始时间 :">
                            <el-date-picker  class="top start" @change="changeDate1"  placeholder="开始时间" type="date" v-model="addData.startTime"></el-date-picker>
                             <span class="disTime dis">请输入开始时间</span>
                        </el-form-item>
                        <el-form-item label="结束时间 :">
                            <el-date-picker  class="top end" @change="changeDate2"  placeholder="结束时间" type="date" v-model="addData.endTime"></el-date-picker>
                        </el-form-item>
                    </el-form>
                </template>
            </el-tab-pane>
            <el-tab-pane label="虚拟商品" name="second">
                <template>
                   <el-form :model="addData">
                        <el-form-item label="商品 :">
                            <el-input class="inputSty" v-model="addData.propName"></el-input>
                        </el-form-item>
                        <el-form-item label="图片 :">
                             <div class="upload">
                                 <img class="imgUpload" :src="this.addData.img" alt="">
                                 <el-button style="" type="primary" @click="goUpload" size="small">上传图片</el-button>
                                 <input type="file" @change="fileChange" ref="file" class="file" accept='image/*'>
                               </div>
                        </el-form-item>
                        <el-form-item label="商品数量 :">
                            <el-input class="inputSty" placeholder='请输入合理的数字' v-model="addData.number"></el-input>
                        </el-form-item>
                        <el-form-item label="商品库存 :">
                            <el-input class="inputSty" placeholder='请输入合理的数字' v-model="addData.notNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="商品原价 :">
                            <el-input class="inputSty" placeholder='请输入合理的数字' @change="changeGoodsPrice" v-model="changeThree.goodsOriginal"></el-input>
                        </el-form-item>
                        <el-form-item label="商品现价 :">
                            <el-input class="inputSty" placeholder='请输入合理的数字' @change="changeGoodsNow" v-model="changeThree.goodsNow"></el-input>
                        </el-form-item>
                        <el-form-item label="折扣率 :">
                            <el-input class="inputSty" style="width:100px;" @change="changeDepositRate" v-model="changeThree.depositRate"></el-input>
                            <label for="">折</label>
                        </el-form-item>
                        <el-form-item label="开始时间 :">
                            <el-date-picker  class="top" @change="changeDate1"  placeholder="开始时间" type="date" v-model="addData.startTime"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间 :">
                            <el-date-picker  class="top" @change="changeDate2"  placeholder="结束时间" type="date" v-model="addData.endTime"></el-date-picker>
                        </el-form-item>
                        <template>
                           <div slot="footer" class="dialog-footer">
                                <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
                                <el-button type="primary" @click="addGoodsMessage()">添 加</el-button>
                            </div>
                        </template>
                    </el-form>
                </template>
            </el-tab-pane>
        </el-tabs>
           <div class="btnAd">    
               <el-button @click="dialogFormVisibleAdd = false">取 消</el-button>
               <el-button type="primary" @click="addGoodsMessage">保 存</el-button>
           </div>
       </el-dialog>
        <!--修改数据弹出框-->
       <el-dialog title="修改信息" :visible.sync="dialogFormVisibleChange">
        <el-form :model="addData">
                        <el-form-item label="货品">
                            <el-input class="inputSty" v-model="changeShowData.propName"></el-input>
                        </el-form-item>
                        <el-form-item label="图片">
                               <div class="upload">
                                 <img class="imgUpload" :src="this.changeShowData.img" alt="">
                                 <el-button type="primary" @click="goUploadC" size="small">修改图片</el-button>
                                <input type="file" @change="fileChangeC" ref="file" class="file" accept='image/*'>
                               </div>
                               
                        </el-form-item>
                        <el-form-item label="货品数量">
                            <el-input class="inputSty" v-model="changeShowData.number"></el-input>
                        </el-form-item>
                        <el-form-item label="货品库存">
                            <el-input class="inputSty" v-model="changeShowData.notNumber"></el-input>
                        </el-form-item>
                        <el-form-item label="货品原价">
                            <el-input class="inputSty" @change="changeGoodsPriceTwo" v-model="changeThreeTwo.goodsOriginal"></el-input>
                        </el-form-item>
                        <el-form-item label="货品现价">
                            <el-input class="inputSty"  @change="changeGoodsNowTwo" v-model="changeThreeTwo.goodsNow"></el-input>
                        </el-form-item>
                        <el-form-item label="折扣率">
                            <el-input class="inputSty" style="width:100px;" @change="changeDepositRateTwo" v-model="changeThreeTwo.depositRate"></el-input>
                            <label for="">折</label>
                        </el-form-item>
                        <el-form-item label="开始时间">
                            <el-date-picker  class="top" @change="changeDate3"  placeholder="开始时间" type="date" v-model="changeShowData.startTime"></el-date-picker>
                        </el-form-item>
                        <el-form-item label="结束时间">
                            <el-date-picker  class="top" @change="changeDate4"  placeholder="结束时间" type="date" v-model="changeShowData.endTime"></el-date-picker>
                        </el-form-item>
        </el-form>
          <div style="width:200px;margin:0 auto">
              <el-button @click="dialogFormVisibleChange = false">取 消</el-button>
              <el-button type="primary" @click="changeGoodsMessage">修 改</el-button>
          </div>
       </el-dialog>
        <el-table
            :data="goodsMessageData.list"
            border
            max-height="400"
            style="width: 85%">
            <el-table-column
            fixed
            prop="date"
            type="index"
            label="序号"
            width="100">
            </el-table-column>
            <el-table-column
            prop="propName"
            label="商品"
            width="130">
            </el-table-column>
            <el-table-column
            prop="name"
            label="商品图片"
            width="120">
              <template slot-scope="scope">
                <img style="width: 50px;height: 50px;" :src="scope.row.img" alt="">
              </template>
            </el-table-column>
            <el-table-column
            prop="entity"
            label="物品"
            width="130">
              <template slot-scope="scope">
                    {{ GoodsStatus(scope.row.entity) }}
              </template>
            </el-table-column>
            <el-table-column
            prop="number"
            label="商品数量"
            width="100">
            </el-table-column>
            <el-table-column
            prop="notNumber"
            label="商品剩余数量"
            width="130">
            </el-table-column>
            <el-table-column
            prop="price"
            label="商品原价"
            width="130">
            </el-table-column>
            <el-table-column
            prop="nowPrice"
            label="商品现价"
            width="130">
            </el-table-column>
            <el-table-column
            prop="rate"
            label="折扣率"
            width="110">
            </el-table-column>
             <el-table-column
            prop="startTime"
            label="开始时间"
            width="160">
            </el-table-column>
             <el-table-column
            prop="endTime"
            label="结束时间"
            width="160">
            </el-table-column>
            <el-table-column
            fixed="right"
            label="操作"
            width="160">
            <template slot-scope="scope">
                <el-button
                size="mini"
                @click="changeGoods(scope.row)">修改</el-button>
                <el-button
                size="mini"
                type="danger"
                @click="deleteGoods(scope.row.id)">删除</el-button>
            </template>
            </el-table-column>
        </el-table>
         <!--分页-->
         <div class="block" style="text-align:right;padding: 10px;width:85%;">
            <el-pagination
              @current-change="handleCurrentChange"
              :current-page.sync="goodsMessageData.pageNumber"
              :page-size="goodsMessageData.pageSize"
              layout="total, prev, pager, next"
              :total="goodsMessageData.totalRow">
            </el-pagination>
        </div>
    </div>
</template>
<script>
import GoodsStatus from '../server/goods.js'
    export default {
        data(){
            return {
                dialogImageUrl: '',
                dialogVisible: false,
                changeShowData:'',
                GoodsStatus:GoodsStatus,
                goods:'',
                number:'',
                lastNumber:'',
                beginTime:'',
                endTime:'',
                addData:{
                    startTime:''
                },
                forms:{
                    pageSize: 5,
                    pageNumber: 1,
                },
                changeThree:{
                    'goodsOriginal':'',
                    'goodsNow':'',
                    'depositRate':''
                },
                  changeThreeTwo:{
                    'goodsOriginal':'',
                    'goodsNow':'',
                    'depositRate':''
                },
                showChangeData:{
                    
                },
                addData:{
                    propName:'',
                    img:'',
                    entity:'',
                    number:'',
                    notNumber:'',
                    startTime:'',
                    endTime:''
                },
                dialogFormVisibleAdd:false,
                dialogFormVisibleChange:false,
                goodsMessageData:[],
                activeName: 'first'
            }
        },
        created(){
            // this.addData.startTime = new Date().getFullYear()+'-'+(new Date().getMonth()+1)+'-'+new Date().getDate()
            this.getGoodsMessage();
        },
       
        methods:{
            // 图片上传
           goUpload(){
             this.$refs.file.click()
           },
           fileChange(e){
              let reader = new FileReader()
                reader.readAsDataURL(e.target.files[0])
                reader.onload = () => {
                    console.log('reaEEEEEEEEEEEEEEEEEEder')
                    console.log(reader)
                this.addData.img = reader.result;
                this.$message.success('图片获取成功')
                //  console.log(this.form.image)
                }
           },
            goUploadC(){
             this.$refs.file.click()
           },
           fileChangeC(e){
              let reader = new FileReader()
                reader.readAsDataURL(e.target.files[0])
                reader.onload = () => {
                this.changeShowData.img = reader.result;
                this.$message.success('图片获取成功')
                //  console.log(this.form.image)
                }
           },
            changeGoodsNow(){
                console.log('>>>>>>>>>>>>')
                if(this.changeThree.goodsOriginal.length>0){
                    if(this.changeThree.goodsNow.length>0){
                        this.changeThree.depositRate =Number(this.changeThree.goodsNow)/Number(this.changeThree.goodsOriginal)*Number(10);
                    }
                }
            },
            changeDepositRate(){
               if(this.changeThree.goodsOriginal.length>0){
                    if(this.changeThree.depositRate.length>0){
                        this.changeThree.goodsNow = Number(this.changeThree.goodsOriginal)*Number(this.changeThree.depositRate)/Number(10);
                    }
                }
            },
            changeGoodsPrice(){
                console.log('211121511516')
                 if(this.changeThree.goodsOriginal.length>0){
                     console.log('44444')
                    // if(this.changeThree.depositRate.length>0){
                        // if(this.changeThree.goodsNow.length>0){
                            console.log('55555')
                            this.changeThree.depositRate = Number(this.changeThree.goodsNow)/Number(this.changeThree.goodsOriginal)*Number(10);
                        // }
                    // }
                }
            },
              changeGoodsPriceTwo(){
                // console.log('211121511516')
                 if(this.changeThreeTwo.goodsOriginal.length>0){
                    // if(this.changeThreeTwo.depositRate.length>0){
                        // if(this.changeThree.goodsNow.length>0){
                            
                        this.changeThreeTwo.depositRate = Number(this.changeThreeTwo.goodsNow)/Number(this.changeThreeTwo.goodsOriginal)*Number(10);
                        // }
                    // }
                }
            },
             changeGoodsNowTwo(){
                 
                // if(this.changeThreeTwo.goodsOriginal.length>0){
                //     console.log('3333333333')
                //     if(this.changeThreeTwo.goodsNow.length>0){
                //          console.log('1111111')
                        //  this.changeThree.depositRate =Number(this.changeThree.goodsNow)/Number(this.changeThree.goodsOriginal)*Number(10);
                        this.changeThreeTwo.depositRate =Number(this.changeThreeTwo.goodsNow)/Number(this.changeThreeTwo.goodsOriginal)*Number(10);
                //     }
                // }
            },
            changeDepositRateTwo(){
            //    if(this.changeThreeTwo.goodsOriginal.length>0){
            //         if(this.changeThreeTwo.depositRate.length>0){
            //              console.log('22222222')
                        this.changeThreeTwo.goodsNow = Number(this.changeThreeTwo.goodsOriginal)*Number(this.changeThreeTwo.depositRate)/Number(10);
                //     }
                // }
            },
          
            // 获取全部数据
            getGoodsMessage(){
              this.$api.getGoodsMessage(this.forms).then(res=>{
                if(res.code=='000000'){
                    this.goodsMessageData = res.data;
                    console.log('this.goodsMessageData')
                    console.log(this.goodsMessageData)
                }
             })
            },
            // 分页
             handleCurrentChange (val) {
                this.forms.pageNumber = val
                this.getGoodsMessage()
           },
          
            // 删除商品信息
            deleteGoods(id){
                 this.$confirm('您确定要删除该商户吗, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                    }).then(() => {
                    this.$api.deleteGoodsMessage(id).then(res => {
                        console.log(id)
                        if (res.code === '000000') {
                        this.$message.success('删除成功')
                        this.getGoodsMessage();
                        }
                    })
                    }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    })
                    })
            },
            changeDate1 (val) {
                if(this.addData.startTime!=''){
                     $('.start input').css({
                       'border':'1px solid #dcdfe6'
                   })
                   $('.disTime').addClass('dis')
              }
                val ? this.addData.startTime = Date.parse(val) : this.addData.startTime = undefined;
            },
            changeDate2 (val) {
                val ? this.addData.endTime = Date.parse(val) : this.addData.endTime = undefined
            },
            changeDate3 (val) {
                val ? this.changeShowData.startTime = Date.parse(val) : this.changeShowData.startTime = undefined;
            },
            changeDate4 (val) {
                val ? this.changeShowData.endTime = Date.parse(val) : this.changeShowData.endTime = undefined
            },
            // 添加商品
            addGoodsMessage(){
              this.addData.price=this.changeThree.goodsOriginal;
              this.addData.nowPrice=this.changeThree.goodsNow;
              this.addData.rate=this.changeThree.depositRate;
              console.log(this.addData)
              if(this.activeName=='first'){
                  console.log('111111111')
                  this.addData.entity = 1
              }else{
                  console.log('00000000')
                  this.addData.entity = 0
              }
              if(this.addData.endTime!='' && this.addData.startTime==''){
                   $('.start input').css({
                       'border':'1px solid red'
                   })
                   $('.disTime').removeClass('dis')
                   return;
              }
              console.log('8888888>>>>>>')
               console.log(this.addData)
               this.$api.addGoodsMessage(this.addData).then(res=>{
                if(res.code=='000000'){
                    this.getGoodsMessage();
                    this.dialogFormVisibleAdd = false;
                }
             })
            },
             // 表格中修改商品按钮弹出框
            changeGoods(row) {
                 this.dialogFormVisibleChange = true;
                 this.changeShowData = row;
                 console.log('<>><><????????//');
                 console.log(this.changeShowData)
                 this.changeThreeTwo.goodsOriginal = row.price;
                 this.changeThreeTwo.goodsNow = row.nowPrice;
                 this.changeThreeTwo.depositRate = row.rate;
            },
            // 修改商品信息
            changeGoodsMessage(){
              this.changeShowData.price=this.changeThreeTwo.goodsOriginal;
              this.changeShowData.nowPrice=this.changeThreeTwo.goodsNow;
              this.changeShowData.rate=this.changeThreeTwo.depositRate;
              console.log('?{{{{{{{{{{{{{}}}}}}]]]]]]]');
              console.log(this.changeShowData)
                this.$api.addGoodsMessage(this.changeShowData).then(res=>{
                if(res.code=='000000'){
                     this.getGoodsMessage();
                     this.dialogFormVisibleChange = false;
                }
             })
             
            },
             handleClick(tab, event) {
                console.log(tab, event);
            }
        }
    }
</script>
<style>
#bodag{
    margin:10px 20px;
}
#bodag .upload button{
    height:30px;
    position:relative;
    top:20px;
}
#bodag .upload{
    display:flex;
    height:70px;
    line-height:70px;
}
#bodag .imgUpload{
    width:80px;
    height:80px;
}
#bodag .dis{
    color:red;
    display:none;
    
}
#bodag .btnAd{
    width:200px;
    margin:0 auto;
}
#bodag .imgAdd{
    height:70px;
    width:60px;
}
#bodag .inputSty{
    width:300px;
}
#bodag .bodag{
    height:290px;
    width:1050px;
    padding:20px 0 0 20px;
}
#bodag .el-form-item__label{
    width:100px;
}
#bodag .el-dialog__body{
    padding-top:10px;
}
#bodag .img{
    height:50px;
    width:40px;
}
#bodag .el-form-item__label {
    vertical-align: middle;
    float: left;
    font-size: 14px;
    color: #606266;
    line-height: 35px;
    padding: 0  10px;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
}
#bodag .top .el-input__inner{
    padding-left:30px!important;
}
#bodag .el-input__inner {
    -webkit-appearance: none;
    background-color: #fff;
    background-image: none;
    border-radius: 4px;
    border: 1px solid #dcdfe6;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    color: #606266;
    display: inline-block;
    font-size: inherit;
    height: 35px;
    line-height: 1;
    outline: 0;
    padding: 0 15px;
    -webkit-transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    transition: border-color .2s cubic-bezier(.645,.045,.355,1);
    width: 100%;
}
#bodag .file{
      display:none;
    }
   #bodag .el-dialog{
       min-width:450px;
       max-width:500px;
   }
</style>